<template>
  <div class="client">
    <!--<header-one></header-one>-->
    <!--头部样式-->
    <div class="client-header">
      <div class="client-img">
        <img src="../assets/image_device.png">
      </div>
      <div class="client-text">
        <h2>穿云箭客户端</h2>
        <p>下载桌面版与手机版客户端，一键开启新世界大门</p>
      </div>
    </div>
    <!--电脑端列表-->
    <div class="client-list">
      <h3>桌面客户端</h3>
      <div class="client-list-content">
        <div class="client-list-box" v-for="list in lists" >
          <!--鼠标移入移除效果-->
          <div class="client2"  @mouseover="toggleShow(list)" @mouseout="toggleShow(list)" >
            <div class="client-list-img" v-show="list.ok1">
              <img :src="list.img">
            </div>
            <div class="client-list-p" v-show="list.no1">
              <p>{{list.text1}}</p>
              <p>{{list.text2}}</p>
            </div>
          </div>
          <p class="fixingName">{{list.name}}</p>
        </div>
      </div>
    </div>
    <!--手机端列表-->
    <div class="client-phone">
      <h3>手机客户端</h3>
      <div class="client-tel">
        <div class="client-1">
          <div class="div1-height">
              <div>
                <p>
                  <img src="../assets/icon_ios_color.png">
                  <span>iphone版下载</span>
                </p>
              </div>
            </div>
            <div class="div1-height">
              <div class="android">
                <p>
                  <img src="../assets/icon_andriod_color.png">
                  <span>Android版下载</span>
                </p>
              </div>
          </div>
        </div>
        <div class="RQcode"><img src="../assets/image_codes.png"></div>
      </div>
    </div>
    <!--页脚-->
    <footer-one></footer-one>
  </div>
</template>
<script>
  //引入组件
  import HeaderOne from '../components/firmware/header'
  import FooterOne from '../components/firmware/footer.vue'
  //照片的引入
  import bgImg from  '../assets/bg_image_ill_1920.png'//背景图片
  import imgDevice from '../assets/image_device.png' //背景上图片
  import imgCode from '../assets/image_codes.png' //二维码
  import imgIos from '../assets/icon_ios_color.png' //ios
  import imgAndriod from '../assets/icon_andriod_color.png'//安卓
  import windows from '../assets/icon_windows_color.png'
  import linux from '../assets/icon_linux_color.png'
  import mac from '../assets/icon_mac_color.png'
  export default{
      name:'Client',
    data(){
          return{
              isShow:{
                  no1:false,
                  ok1:true
              },
//            screenHeight: window.screen.height-150,
            lists:[
              {
                name:'windows',
                text1:'32位',
                text2:'64位',
                img:windows,
                no1:false,
                ok1:true
              },
              {
                name:'MacOS',
                text1:'32位',
                text2:'64位',
                img:mac,
                no1:false,
                ok1:true
              },
              {
                name:'Linux',
                text1:'32位',
                text2:'64位',
                img:linux,
                no1:false,
                ok1:true
              }
            ]
          }
    },
    methods:{
      toggleShow:function (list) {
          this.lists.forEach(function (el) {
            if(el == list){
                el.no1 =!el.no1;
                el.ok1 =!el.ok1;
            }
          })

      }
    },
    //注册组件
    components:{FooterOne,HeaderOne},
//    mounted (){
//      //设置模块高度
//      document.getElementById('help').style.height=this.screenHeight+"px";//页面初始化
//    },
  }
</script>
<style scoped>
  .client{
    font-size: 1.0rem;

  }
   p, div{
    margin: 0;
    padding: 0;
  }

  .client-header{
    padding-top: 6rem;
    /*height:22rem;*/
    background: url("../assets/bg_image_ill_1920.png") no-repeat #fb4c06;
    background-size:100% 100%;
    -moz-background-size:100% 100%;
    width: 100%;
    vertical-align: bottom;
    display: table;
    /*background-color:#FF7A3F ;*/
  }
  .client-header img{
    max-height: 100%;
    max-width: 100%;
    overflow: hidden;
    /*vertical-align: bottom;*/
    /*display: table-cell;*/
  }
  .client-header .client-img{
    /*height:17rem ;*/
    width: 50%;
    display: inline-block;
    vertical-align: bottom;
    display: table-cell;
    text-align: right;

  }
  .client-header .client-text{
    padding: 0 0 50px 20px;
    width: 50%;
    display: inline-block;
    display: table-cell;
    color: #ffffff;
    vertical-align: middle;
    text-align: left;
  }
  .client-header .client-text h2{
    font-weight: 200;

  }
  .client-list{
    background-color: #F5F5F5;
    width: 100%;
  }
  .client-list h3{
    font-weight: 100;
    padding: 7rem 0 4rem;
    margin: 0;
    font-size: 2rem;
    /*display: table-cell;*/
  }
  .client-list-content{
    width: 70%;
    margin: auto;
    text-align: center;
    padding-bottom: 5rem;
    }
  .client-list-box{
    display: inline-block;
    /*padding:  0 7%;*/
    width: 30%;
    margin: auto;
    text-align: center;
  }
  .client2{
    display: table;
    vertical-align: middle;
    margin: auto;
  }

  .fixingName{
    padding-top: 10px;
  }
  /*图片显示*/
  .client-list-img{
    display: table-cell;
    vertical-align: middle;
    margin: auto;
    height: 13rem;
    width: 13rem;
    background-color: #ffffff;
    /*padding-top: 70px;*/
  }
  .client-list-p p{
    width: 80%;
    margin: auto;
    color: #ffffff;
    padding: 0.5rem 0;
    margin: 30px auto;
    border: 1px solid #ffffff;
    border-radius: 2px;
  }
  .client-list-p p:hover{
    cursor: pointer;
  }
  /*文字显示*/
  .client-list-p{
    display: table-cell;
    vertical-align: middle;
    margin: auto;
    height: 13rem;
    width: 13rem;
    background-color: #FF7A3F;
  }

  /*手机版下载*/
  .client-phone h3{
    font-size: 2.0rem;
    font-weight: 200;
    padding: 7rem 0 3rem;
  }
  .client-tel{
    padding-bottom: 7rem;
  }
  .client-tel div{
    display: inline-block;
  }
  .client-1{
    padding-right:30px;
  }
  .client-1 div{
    display: table;
    height: 70px;
  }
  .android{
    display: table-cell;
    vertical-align: bottom;
  }
  .RQcode{
    height: 140px;
    margin: auto;
    padding-left: 30px;
  }
  .RQcode img{
    max-width: 100%;
    height: 100%;
    display: block;
  }
  .div1-height div{
    display: table-cell;
    height: 40px;
    width: 200px;
  }
  .div1-height div p:hover{
    background-color: aliceblue;
    cursor: pointer;
  }
  .div1-height div p{
    border: 1px solid #FF7A3F;
    border-radius: 3px;
    padding: 3px 0;
    background-color: #f5f5f5;
  }
  .android{
    display: table-cell;
    vertical-align: bottom;
  }
  /*.div1-height div:hover{*/
    /*cursor: pointer;*/
  /*}*/
  .div1-height div span{
    display: inline-block;
    vertical-align: middle;
  }
  .div1-height div img{
    display: inline-block;
    vertical-align: middle;
  }
</style>
